<!--展示列表-->
<template>
  <div class="hello">

    <el-button type="text" @click="dialogFormVisible1= true">新增</el-button>

    <el-input placeholder="请输入学号" v-model="search" class="input-with-select">
    <el-button slot="append" icon="el-icon-search" @click="searchdata()"></el-button>
  </el-input>

     <el-table
    :data="arrs"
    stripe
    style="width: 100%">
    <el-table-column
      prop="sno"
      label="学号"
      width="100">
    </el-table-column>
    <el-table-column
      prop="sname"
      label="姓名"
      width="100">
    </el-table-column>
    <el-table-column
      prop="ssex"
      label="性别"
       width="100">
    </el-table-column>
    <el-table-column
      prop="sage"
      label="年龄"
      width="100">
    </el-table-column>
    <el-table-column
      prop="sdepartion"
      label="学院"
      width="100">
    </el-table-column>
    <el-table-column
      prop="specialty"
      label="专业"
       width="100">
    </el-table-column>
    <el-table-column
      prop="class"
      label="班级"
      width="100">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="电话"
      width="100">
    </el-table-column>
    <el-table-column
      prop="mail"
      label="邮箱"
      width="100">
    </el-table-column>
    <!-- 按钮部分 -->
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="deletedata(scope.$index,scope.row)" type="text" size="small">删除</el-button>
        <el-button type="text" @click="bianji(scope.$index,scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>



    <!-- 弹出编辑表单 -->
  <el-dialog title="信息修改" :visible.sync="dialogFormVisible">
  <el-form :model="rowdata">
    <el-form-item label="学号" :label-width="formLabelWidth">
      <el-input v-model="rowdata.sno" :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="姓名" :label-width="formLabelWidth">
      <el-input placeholder="请输入内容" v-model="rowdata.sname" :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="性别" :label-width="formLabelWidth">
      <el-input placeholder="请输入内容" v-model="rowdata.ssex" :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="年龄" :label-width="formLabelWidth">
      <el-input v-model="rowdata.sage" placeholder="请输入内容"></el-input>
    </el-form-item>
    <el-form-item label="学院" :label-width="formLabelWidth">
      <el-input v-model="rowdata.sdepartion" placeholder="请输入内容"></el-input>
    </el-form-item>
    <el-form-item label="专业" :label-width="formLabelWidth">
      <el-input v-model="rowdata.specialty" placeholder="请输入内容"></el-input>
    </el-form-item>
    <el-form-item label="班级" :label-width="formLabelWidth">
      <el-input v-model="rowdata.class" placeholder="请输入内容"></el-input>
    </el-form-item>
    <el-form-item label="电话" :label-width="formLabelWidth">
      <el-input v-model="rowdata.phone" placeholder="请输入内容"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" :label-width="formLabelWidth">
      <el-input v-model="rowdata.mail" placeholder="请输入内容"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="updatedata()">确 定</el-button>
  </div>
</el-dialog>

  <!-- 弹出新增表单 -->
  <el-dialog title="信息修改" :visible.sync="dialogFormVisible1">
  <el-form :model="rowdatas">
    <el-form-item label="学号" :label-width="formLabelWidth">
      <el-input v-model="rowdatas.sno" placeholder="请输入内容"></el-input>
    </el-form-item>
    <el-form-item label="姓名" :label-width="formLabelWidth">
      <el-input v-model="rowdatas.sname" placeholder="请输入内容"></el-input>
    </el-form-item>
    <el-form-item label="性别" :label-width="formLabelWidth">
      <el-input v-model="rowdatas.ssex" placeholder="请输入内容"></el-input>
    </el-form-item>
    <el-form-item label="年龄" :label-width="formLabelWidth">
      <el-input v-model="rowdatas.sage" placeholder="请输入内容"></el-input>
    </el-form-item>
    <el-form-item label="学院" :label-width="formLabelWidth">
      <el-input v-model="rowdatas.sdepartion" placeholder="请输入内容"></el-input>
    </el-form-item>
    <el-form-item label="专业" :label-width="formLabelWidth">
      <el-input v-model="rowdatas.specialty" placeholder="请输入内容"></el-input>
    </el-form-item>
    <el-form-item label="班级" :label-width="formLabelWidth">
      <el-input v-model="rowdatas.class" placeholder="请输入内容"></el-input>
    </el-form-item>
    <el-form-item label="电话" :label-width="formLabelWidth">
      <el-input v-model="rowdatas.phone" placeholder="请输入内容"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" :label-width="formLabelWidth">
      <el-input v-model="rowdatas.mail" placeholder="请输入内容"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="newdata()">新 增</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import qs from 'qs';
export default {
  name: 'Test1',
  data()
  {
      return {
        arr:'',
        dialogFormVisible: false,
        dialogFormVisible1: false,
        formLabelWidth: '120px',
        rowdata:'',  //编辑按钮获取的那行数据
        rowdatas:{
          sno:'',
          sname:'',
          ssex:'',
          sage:'',
          sdepartion:'',
          specialty:'',
          class:'',
          phone:'',
          mail:''
        },  //新增的数据
        search:''  //搜索的数据
      }
  },
  methods:{

    //编辑按钮函数
    bianji(index,row){
      this.dialogFormVisible = true,
      this.rowdata = row  //传入当前行的数据
    },

      // 获取列表数据
      getdata(){
          console.log('函数执行了');
                axios({
                    url:`/API/student/all`, //后端的接口地址                    	
                    method:"get",//注意，这里没有s！！！
                    transformRequest:[
                        function(data){
                            data = qs.stringify(data);
                            return data;
                        },
                    ],
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
                    },
                    dataType:"json",
                })
                .then((res) => {
                    console.log("连接成功");//这里打印出来是为了更直观的看到连接成功了
                    console.log(res); //res是后端返回来的数据，如果连接成功，则把res打印出来
                    this.arr = res.data.data//这里进行传回数据的赋值
                    //this.age = res.data.msg[0].sage //让本页的数据等于回传的数据
                })
                .catch(function(error){
                    console.log("连接失败");
                    console.log(error); //如果连接失败，则抛出错误的信息
                });
      },
      //删除数据
      deletedata(index,row){
        console.log('函数执行了');
        console.log(row.sno)
                axios({
                    url:`/API/student/delete`, //后端的接口地址                    	
                    method:"post",//注意，这里没有s！！！
                    data:{
                      sno: row.sno   //传学号到后端接口操作数据库进行删除
                    },
                    transformRequest:[
                        function(data){
                            data = qs.stringify(data);
                            return data;
                        },
                    ],
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
                    },
                    dataType:"json",
                })
                .then((res) => {
                    console.log("删除成功");//这里打印出来是为了更直观的看到连接成功了
                    console.log(res); //res是后端返回来的数据，如果连接成功，则把res打印出来
                    this.arrs.splice(index,1)//这里进行传回数据的赋值
                    //this.age = res.data.msg[0].sage //让本页的数据等于回传的数据
                })
                .catch(function(error){
                    console.log("连接失败");
                    console.log(error); //如果连接失败，则抛出错误的信息
                });
      },
      // 更新数据
      updatedata(){
          this.dialogFormVisible = false
          console.log('函数执行了');
                axios({
                    url:`/API/student/update`, //后端的接口地址                    	
                    method:"post",//注意，这里没有s！！！
                    data:{
                      sno:this.rowdata.sno,
                      sage:this.rowdata.sage,
                      sdepartion:this.rowdata.sdepartion,
                      specialty:this.rowdata.specialty,
                      class:this.rowdata.class,
                      phone:this.rowdata.phone,
                      mail:this.rowdata.mail
                    },
                    transformRequest:[
                        function(data){
                            data = qs.stringify(data);
                            return data;
                        },
                    ],
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
                    },
                    dataType:"json",
                })
                .then((res) => {
                    console.log("修改成功");//这里打印出来是为了更直观的看到连接成功了
                    console.log(res); //res是后端返回来的数据，如果连接成功，则把res打印出来
                   
                })
                .catch(function(error){
                    console.log("连接失败");
                    console.log(error); //如果连接失败，则抛出错误的信息
                });
      },
      // 新增数据
      newdata(){
          this.dialogFormVisible1 = false
          console.log('函数执行了');
                axios({
                    url:`/API/student/add`, //后端的接口地址                    	
                    method:"post",//注意，这里没有s！！！
                    data:{
                      sno:this.rowdatas.sno,
                      sname:this.rowdatas.sname,
                      sage:this.rowdatas.sage,
                      ssex:this.rowdatas.ssex,
                      sdepartion:this.rowdatas.sdepartion,
                      specialty:this.rowdatas.specialty,
                      class:this.rowdatas.class,
                      phone:this.rowdatas.phone,
                      mail:this.rowdatas.mail
                    },
                    transformRequest:[
                        function(data){
                            data = qs.stringify(data);
                            return data;
                        },
                    ],
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
                    },
                    dataType:"json",
                })
                .then((res) => {
                    console.log("修改成功");//这里打印出来是为了更直观的看到连接成功了
                    console.log(res); //res是后端返回来的数据，如果连接成功，则把res打印出来
                    this.arr.push(this.rowdatas) //将新增的数据返回到前端页面中
                })
                .catch(function(error){
                    console.log("连接失败");
                    console.log(error); //如果连接失败，则抛出错误的信息
                });
      },
      //查找数据

  },
  computed: {
    // 展示的数据
    arrs(){
      const input = this.search
      if(input){
        console.log("input输入的搜索内容：",+this.search)
        return this.arr.filter(data =>{
          return Object.keys(data).some(key=>{
            return String(data[key]).toLowerCase().indexOf(input) >-1
          })
        })
      }
      return this.arr
    }
  },
  created(){
      this.getdata();
      
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

</style>
